import React, {Component, PropTypes} from 'react';
import classNames from 'classnames';
import Validator from '../../utils/Validator';
import Button from './Button';
import Tooltip from '../window/Tooltip';

/**
 * 文本框组件
 */
export default class Text extends Component{
	
	static propsTypes = {
		id: PropTypes.string.isRequired,
		label: PropTypes.string, 
		labelWidth: PropTypes.number,
		span: PropTypes.number, //占几列
		offset: PropTypes.number,
		type: PropTypes.oneOf(['text', 'password', 'textarea']),  //文本框类型
		height: PropTypes.number, //只在type 为textarea下有效
		defValue: PropTypes.any, //默认值
		placeholder: PropTypes.string,
		tooltip: PropTypes.string, //提示信息
		disabled: PropTypes.bool, //是否禁用
		icon: PropTypes.string, //文本框前图标
		search: PropTypes.bool, //文本框后的搜索按钮
		searchIcon: PropTypes.string, //文本框前搜索按钮样式
		required: PropTypes.bool, // 是否必填
		minLen: PropTypes.number, //最小字符长度
		maxLen: PropTypes.number, //最大字符长度
		validType: PropTypes.string,  //验证类型
		onValid: PropTypes.func, //自定义验证函数
		onSearch: PropTypes.func, //搜索按钮
		onChange: PropTypes.func,  //内容变更函数
		onKeyDown: PropTypes.func,
		onPress: PropTypes.func, //回车事件
	}

	static defaultProps = {
		type: 'text',
		span: 1,
		search: false,
		searchIcon: 'search',
		required: false,
		disabled: false
	}

	constructor(props){
		super(props);
		let {
			defValue: value, 
			disabled,
			required,
			minLen,
			maxLen,
			validType,
			tooltip
		} = this.props;
		
		let types = [];
		
		if(required){
			types.push('r');
		}
		if(minLen && minLen > 0){
			types.push('minLen[' + minLen + ']');
		}
		if(maxLen && maxLen > 0){
			types.push('maxLen[' + maxLen + ']');
		}
		if(validType){
			types.push(validType.split(','));
		}

		this.vatorTypes = types;

		this.state = {
			value,
			disabled,
			tooltip,
			vatorMsg: undefined,  //验证描述
		};

	}

	validator = (e) =>{
		if(this.vatorTypes.length > 0){
			let {onValid} = this.props;
			let {value} = this.state;
			let vatorRes = Validator.doValid(this.vatorTypes, this.state.value);
			if(vatorRes === true){ //调用自定义验证函数
				if(onValid){
					vatorRes = onValid(value); //onValid函数如果验证成功则返回true 否则返回验证失败的结果
				}
			}
			if(vatorRes !== true){
				this.setState({vatorMsg: vatorRes});
				return vatorRes;
			}else{
				this.setState({vatorMsg: undefined});
			}
		}
		return true;
	}

	onKeyDown = (e) =>{
		let {onKeyDown, onPress} = this.props;
		if(e.which == 13 && onPress){
			onPress(e.nativeEvent, this.state.value);
		}else if(onKeyDown){
			onKeyDown(e.nativeEvent, this.state.value);
		}
	}

	onSearch = (e)=>{
		let {onSearch} = this.props;
		if(onSearch){
			onSearch(this.state.value);
		}
	}

	onChange = (e)=>{
		let {
			onChange
		} = this.props;
		this.setState({
			value: e.target.value
		}, function(){
			this.validator();
		});

		if(onChange){
			onChange(e.target.value);
		}
	}

	onBlur = (e)=>{
		this.validator();
	}

	getLabel(){
		let {
			label,
			labelWidth,
			required
		} = this.props;
		
		let style = {};

		if(labelWidth){
			style['width'] = labelWidth;
		}
		return label ? (
			<label className='rd-label' style={style}>
				{required ? <span className='rd-label-required'>*</span> : null}
				{label}
			</label>
		): null;
	}
	
	getInput(){
		let {
			id,
			type,
			placeholder,
			height
		} = this.props;

		let {value, vatorMsg, disabled} = this.state;
		let input = null;

		let inputCls = classNames({
			'valadator-error': vatorMsg != undefined,
			'disabled': disabled
		});
		
		switch(type){
			case 'textarea':
				input = <textarea 
							id={id} 
							className={inputCls} 
							defaultValue={value} 
							placeholder={placeholder}
							onChange={this.onChange}
							onKeyDown={this.onKeyDown}
							disabled={disabled}
							style={{height: height ? height: '100%'}}
							onBlur={this.onBlur}/>;
				break;
			default:
				input = <input 
							id={id} 
							className={inputCls} 
							type={type} 
							defaultValue={value} 
							placeholder={placeholder}
							onChange={this.onChange}
							onKeyDown={this.onKeyDown}
							disabled={disabled}
							onBlur={this.onBlur}/>;
				break;
		}
		return input;
	}


	render(){
		let {
			span, 
			offset, 
			icon,
			search,
			searchIcon,
			label,
			labelWidth
		} = this.props;
		let {tooltip, vatorMsg} = this.state;
		let cls = classNames({
			'rd-text': true,
			['rd-span' + span] : true,
			['rd-offset' + offset]: offset
		});
		if(vatorMsg){
			tooltip = vatorMsg;
		}
		let warpStyle = {};
		if(label && labelWidth){
			warpStyle['marginLeft']= labelWidth + 10;
		}
		return (
			<div className={cls}>
				{this.getLabel()}
				<div className='rd-text-warp' style={warpStyle}>
					{icon ? <i className={`fa fa-${icon}`}/> : null}
					{search ? <Button icon={searchIcon} plain onClick={this.onSearch}/>: null}
					<Tooltip title={tooltip}>{this.getInput()}</Tooltip>
				</div>
			</div>
		)
	}
}